<template>
	<div class="ywgzt-container">
		<title-banner title="告警业务事件档案"></title-banner>
		<div class="content">
			<yd-form ref="myForm" :options="formOptions" :model="searchFormData" :btns="formBtns"></yd-form>
			<YdTable
				:formData="searchFormData"
				:tableConfig="tableConfig"
				:tableData="tableData"
				@sizeChangeHandler="searchHandler"
				@currentChangeHandler="searchHandler"
				@sortChangeHandler="searchHandler"
			></YdTable>
			<el-row type="flex" align="middle">
				<el-col :span="4">
					<span>系统名称:{{ searchFormData2.systemName }}</span>
				</el-col>
				<el-col :span="4">
					<span>业务名称:{{ searchFormData2.businessName }}</span>
				</el-col>
				<el-col :span="4">
					<span>共用步骤名称:{{ searchFormData2.stepName }}</span>
				</el-col>
				<el-col :span="4">
					<span>观察对象:{{ searchFormData2.observationObjectName }}</span>
				</el-col>
				<el-col :span="4">
					<span>观察类型:{{ searchFormData2.dataTypeName }}</span>
				</el-col>
				<el-col :span="1" style="text-align: center">
					<el-button type="text" :loading="downloadLoading2" @click="handleExportDetail">
						<svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
					</el-button>
				</el-col>
			</el-row>
			<YdTable
				:formData="searchFormData2"
				:tableConfig="tableConfig2"
				:tableData="tableData2"
				@sizeChangeHandler="queryGrid2"
				@currentChangeHandler="queryGrid2"
				@sortChangeHandler="queryGrid2"
			></YdTable>
		</div>
	</div>
</template>

<script setup name="AlarmServiceEventFiles" lang="tsx">
import TitleBanner from '@/views/ops-workbench/components/TitleBanner/index.vue';
import { parseTime, downloadFromBlob } from '@/utils/common';
import {
	getAlarmEventFileList,
	getAlarmEventFileListDownLoad,
	getAlarmEventFileDetailList,
	getAlarmEventFileDetailListDownLoad,
} from '@/api/ops-workbench/index-more/alarmServiceEventFiles';
import { ref, reactive, onMounted, onActivated } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import useCurrentInstance from '@/utils/useCurrentInstance';

const { proxy } = useCurrentInstance();
const router = useRouter();
const route = useRoute();

const currentTime = new Date();
const endTime = parseTime(currentTime, '{y}-{m}-{d} {h}:{i}:00');
const past1h = currentTime.setHours(currentTime.getHours() - 1);
const searchFormData = reactive({
	systemId: route.query.systemId,
	businessCodeList: route.query.businessCodeList ? [route.query.businessCodeList] : [],
	startTime: parseTime(past1h, '{y}-{m}-{d} {h}:{i}:00'),
	endTime: endTime,
});
const formOptions = reactive<FormOptionType>([
	{
		type: 'select',
		label: '系统名称',
		prop: 'systemId',
		selectKey: 'value',
		isInitValue: false,
		api: {
			name: 'queryAppSystemOptions',
			params: { isStatus: 1 },
		},
		cascaders: [
			{
				cascadersParams: 'businessCodeList',
				api: {
					name: 'queryBusinessOptions',
				},
			},
		],
	},
	{
		type: 'select',
		label: '业务名称',
		prop: 'businessCodeList',
		selectKey: 'value',
		attrs: {
			multiple: true,
			indeterminate: false,
		},
	},
	{
		type: 'select',
		label: '共用步骤/接口',
		prop: 'stepCodeList',
		selectKey: 'value',
		api: {
			name: 'queryPublicStepOptions',
		},
		attrs: {
			multiple: true,
			indeterminate: false,
		},
	},
	{
		type: 'select',
		label: '观察对象',
		prop: 'dataTypeList',
		selectKey: 'code',
		api: {
			name: 'queryObservationObject',
		},
		attrs: {
			multiple: true,
			indeterminate: false,
		},
	},
	{
		type: 'date-picker',
		label: '时间范围',
		prop: 'dateRange',
		span: 9,
		dateType: 'datetimerange',
		shortcutsKeys: ['last1h', 'today', 'lastDay', 'lastWeek'],
		defaulShortcutsKey: 'last1h',
	},
]);
const formBtns = reactive<BtnType[]>([
	{
		type: 'primary',
		text: '查询',
		handler: searchHandler,
	},
	{
		type: 'primary',
		text: '导出',
		handler: downloadHandler,
	},
]);
const searchFormData2: anyObj = reactive({
	alarmIndicatorCode: 'BS_FAIL_RATE_10',
	dataTypeName: '失败业务',
});
const tableData = ref([]);
const tableData2 = ref([]);
const tableConfig = reactive({
	columns: [
		{
			label: '系统名称',
			prop: 'systemName',
		},
		{
			label: '业务名称',
			prop: 'businessName',
		},
		{
			label: '共用步骤名称',
			prop: 'stepName',
		},
		{
			label: '观察对象',
			prop: 'observationObjectName',
		},
		{
			label: '总事件档案数',
			prop: 'eventFileCount',
		},
		{
			label: '失败事件档案数',
			prop: 'failEventFileCount',
			sortable: true,
			operation: [
				{
					rowKey: 'failEventFileCount',
					handler: (scope: anyObj) => {
						(searchFormData2.dataTypeName = '失败业务'), (searchFormData2.alarmIndicatorCode = 'BS_FAIL_RATE_10'), handleAlarmDetail(scope.row);
					},
				},
			],
		},
		{
			label: '响应慢事件档案数',
			prop: 'dealTimeEventFileCount',
			sortable: true,
			operation: [
				{
					rowKey: 'dealTimeEventFileCount',
					handler: (scope: anyObj) => {
						// searchFormData2.selectSystemId = scope.row.id;
						(searchFormData2.dataTypeName = '响应慢业务'), (searchFormData2.alarmIndicatorCode = 'BS_FAIL_RATE_20'), handleAlarmDetail(scope.row);
					},
				},
			],
		},
	],
	pagination: {
		orderByColumn: 'failEventFileCount',
		isAsc: 'desc',
		pageNum: 1,
		pageSize: 10,
		total: 0,
	},
	loading: true,
});
const downloadLoading = ref(false);
const tableConfig2 = reactive({
	columns: [
		{
			label: '起始观察时间',
			prop: 'startTime',
		},
		{
			label: '观察周期',
			prop: 'cycleCount',
		},
		{
			label: '访问量',
			prop: 'count',
		},
		{
			label: '告警访问量',
			prop: 'alarmCount',
		},
		{
			label: '失败访问量',
			prop: 'failCount',
		},
		{
			label: '健康度',
			prop: 'healthRate',
		},
		{
			label: '操作',
			prop: '',
			operation: [
				{
					text: '告警分析',
					handler: (scope: anyObj) => {
						jumpPage(scope.row);
					},
				},
			],
		},
	],
	pagination: {
		pageSize: 10,
		pageNum: 1,
		total: 0,
	},
	loading: false,
});
const downloadLoading2 = ref(false);
onMounted(() => {
	searchHandler();
});
onActivated(() => {
	searchFormData.systemId = route.query.systemId;
	searchFormData.businessCodeList = route.query.businessCodeList ? [route.query.businessCodeList] : [];
	searchHandler();
});

function handleAlarmDetail(item: anyObj) {
	searchFormData2.systemId = item.systemId;
	searchFormData2.systemName = item.systemName;
	searchFormData2.businessCode = item.businessCode;
	searchFormData2.businessName = item.businessName;
	searchFormData2.stepCode = item.stepCode;
	searchFormData2.stepName = item.stepName;
	searchFormData2.observationObjectName = item.observationObjectName;
	searchFormData2.startTime = searchFormData.startTime;
	searchFormData2.endTime = searchFormData.endTime;
	searchFormData2.dataType = item.dataType;
	queryGrid2();
}

function queryGrid2() {
	tableConfig2.loading = true;
	getAlarmEventFileDetailList(searchFormData2).then((res: ApiResponse) => {
		tableConfig2.loading = false;
		if (res.code !== 0) {
			proxy.$modal.msgError(res.msg);
			return;
		}
		tableConfig2.pagination.total = res.data.total;
		tableData2.value = res.data.data;
	});
}

function jumpPage(item: anyObj) {
	let titleTxt = '',
		areaId = 1;
	switch (item.alarmIndicatorCode) {
		case 'BS_FAIL_RATE_20':
			if (item.dataType === 3) {
				titleTxt = '共用步骤-' + item.stepName + '-响应慢业务告警分析';
			} else if (item.dataType === 4) {
				titleTxt = '共用接口-' + item.stepName + '-响应慢业务告警分析';
			} else {
				titleTxt = item.systemName + '-' + item.businessName + '-响应慢业务告警分析';
			}
			break;
		case 'BS_FAIL_RATE_10':
			if (item.dataType === 3) {
				titleTxt = '共用步骤-' + item.stepName + '-失败业务告警分析';
			} else if (item.dataType === 4) {
				titleTxt = '共用接口-' + item.stepName + '-失败业务告警分析';
			} else {
				titleTxt = item.systemName + '-' + item.businessName + '-失败业务告警分析';
			}
			areaId = 2;
			break;
	}
	router.push({
		path: '/ops-workbench/business-alarm-analysis/index',
		query: {
			titleName: titleTxt,
			areaId: areaId,
			...item,
		},
	});
}

function searchHandler() {
	tableConfig.loading = true;
	getAlarmEventFileList(searchFormData).then((res: ApiResponse) => {
		tableConfig.loading = false;
		if (res.code !== 0) {
			proxy.$modal.msgError(res.msg);
			return;
		}
		tableConfig.pagination.total = res.data.total;
		tableData.value = res.data.data;
		if (res.data.total > 0) {
			searchFormData2.systemName = res.data.data[0].systemName;
			searchFormData2.businessName = res.data.data[0].businessName;
			searchFormData2.stepName = res.data.data[0].stepName;
			searchFormData2.observationObjectName = res.data.data[0].observationObjectName;
			searchFormData2.systemId = res.data.data[0].systemId;
			searchFormData2.businessCode = res.data.data[0].businessCode;
			searchFormData2.stepCode = res.data.data[0].stepCode;
			searchFormData2.startTime = searchFormData.startTime;
			searchFormData2.endTime = searchFormData.endTime;
			searchFormData2.dataType = res.data.data[0].dataType;
			queryGrid2();
		} else {
			tableConfig2.pagination.total = 0;
			tableData2.value = [];
		}
	});
}

function downloadHandler() {
	downloadLoading.value = true;
	getAlarmEventFileListDownLoad(searchFormData).then((res) => {
		downloadLoading.value = false;
		const currentDate = new Date();
		const currentDateTimeStr = parseTime(currentDate, '{y}{m}{d}{h}{i}{s}');
		let title = '告警业务事件档案总览列表_' + currentDateTimeStr + `.xlsx`;
		downloadFromBlob(res, title).then((o) => {
			if (!o.flag) {
				proxy.$modal.msgWarning(o.msg);
			}
		});
	});
}
function handleExportDetail() {
	downloadLoading2.value = true;
	getAlarmEventFileDetailListDownLoad(searchFormData2).then((res) => {
		downloadLoading2.value = false;
		const currentDate = new Date();
		const currentDateTimeStr = parseTime(currentDate, '{y}{m}{d}{h}{i}{s}');
		let title = '告警业务事件档案详情列表_' + currentDateTimeStr + `.xlsx`;
		downloadFromBlob(res, title).then((o) => {
			if (!o.flag) {
				proxy.$modal.msgWarning(o.msg);
			}
		});
	});
}
</script>

<style scoped lang="scss">
@import '@/styles/ops-workbench/common.scss';
@import '@/styles/ops-workbench/yd-table.scss';
.ywgzt-container {
	min-width: 1440px;
	min-height: 100vh !important;
	padding: 20px;
	:deep(.el-form-item__label) {
		color: #fff !important;
	}
}
</style>
